<template>
  <div class="overview-page">
    <!-- 顶部导航栏 -->
    <!-- <van-nav-bar title="项目信息总览" left-arrow fixed @click-left="onBack" class="nav-bar" /> -->

    <!-- 统计卡片蓝色背景区域 -->
    <div class="stats-section">
      <div class="card-grid">
        <div class="stat-card" v-for="item in contractStats" :key="item.label">
          <van-icon :name="item.icon" class="stat-icon" />
          <div class="stat-value">{{ item.value }}</div>
          <div class="stat-label">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <!-- 柱状图白色背景区域 -->
    <div class="chart-container">
      <div ref="barChartRef" style="height: 220px; width: 100%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { GetProjectOverview } from '@/api/interface'

export default {
  name: 'ProjectPrev',
  data() {
    return {
      contractStats: [
        { icon: 'notes-o', value: 0, label: '今年立项' },
        { icon: 'clock-o', value: '0%', label: '同比' },
        { icon: 'edit', value: 0, label: '在建项目数' },
        { icon: 'passed', value: '0%', label: '签约率' },
      ],
      barOption: {
        tooltip: { trigger: 'axis' },
        legend: { data: ['在建', '延期'] },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: { color: '#333', fontSize: 12 },
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#333', fontSize: 12 },
        },
        series: [
          {
            name: '在建',
            type: 'bar',
            stack: 'total',
            data: [],
            itemStyle: { color: '#2586ec' },
            barWidth: 16,
          },
          {
            name: '延期',
            type: 'bar',
            stack: 'total',
            data: [],
            itemStyle: { color: '#f7c873' },
            barWidth: 16,
          },
        ],
      },
      barChartInstance: null,
    };
  },
  created() {
    this.getData()
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.renderBarChart();
    // });
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.barChartInstance) {
      this.barChartInstance.dispose();
      this.barChartInstance = null;
    }
  },
  methods: {
    getData() {
      GetProjectOverview().then(res => {
        let r = JSON.parse(res)
        if (r.success) {
          this.contractStats[0].value = r.data.Unit
          this.contractStats[1].value = r.data.Comparison + '%'
          this.contractStats[2].value = r.data.ProjectsNum
          this.contractStats[3].value = r.data.LeftContractAmount + '%'
          this.barOption.xAxis.data = r.data.DeptInfo.map(i => i.name)
          this.barOption.series[0].data = r.data.DeptInfo.map(i => i.zj)
          this.barOption.series[1].data = r.data.DeptInfo.map(i => i.yq)
          this.renderBarChart();
        }
      })
    },
    renderBarChart() {
      const barChartRef = this.$refs.barChartRef;
      if (barChartRef) {
        if (!this.barChartInstance) {
          this.barChartInstance = echarts.init(barChartRef, null, {renderer: 'canvas'});
        }
        this.barChartInstance.setOption(this.barOption);
        this.barChartInstance.resize();
      }
    },
    handleResize() {
      this.barChartInstance && this.barChartInstance.resize();
    },
    onBack() {
      this.$router.push('/')
    },
  },
};
</script>

<style scoped>
.overview-page {
  background: #eee;
  min-height: 100vh;
  padding: 0 0 15px 0;
}

.nav-bar {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 统计卡片区域外层蓝色背景 */
.stats-section {
  background: #2586ec;
  border-radius: 0 0 24px 24px;
  padding-top: 10px;
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px 12px 0 12px;
}

.stat-card {
  width: 48%;
  background: linear-gradient(135deg, #f6f8fa 60%, #e3eefd 100%);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  /* 高度接近宽度，保证方形 */
  aspect-ratio: 1 / 1;
  min-height: 90px;
  max-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-icon {
  font-size: 28px;
  color: #2586ec;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1a3c6b;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  color: #6b7a90;
}

/* 柱状图区域白色背景、圆角、间距、淡投影 */
.chart-container {
  background: #fff;
  border-radius: 16px;
  margin: 0 14px 0 14px;
  padding: 20px 0 15px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}
</style>
